import React, { useState, useEffect }  from 'react'
import { Form, Input, Col, Table, Card, DatePicker } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchAgenterList } from '@/services/dataCenter/proxyData'
import moment from 'moment'
const {RangePicker} = DatePicker

const MemberData = props => {
  const { form, stores } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(0)
  const [agenterList, setAgenterList] = useState([])
  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
  })
  useEffect(() => {
    // 获取会员列表
    _fetchAgenterList(param)
  }, [])
  const _fetchAgenterList = async (param) => {
    const res = await fetchAgenterList(param)
    if (res.code == 0 && res.data) {
      setAgenterList(res.data)
      setTotalPage(res.total)
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _fetchAgenterList({
        ...param,
        pageNo: page,
      })
    }
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetchAgenterList({
        ...param,
        ...values,
        startTime: values.dateTime[0],
        endTime: values.dateTime[1],
      })
    })
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '注册时间',
      dataIndex: 'lqTime',
      key: 'lqTime'
    },
  ]
  const dateFormat = 'YYYY-MM-DD'
  // 查询条件
  const getFields = () => {
    return (<>
      <Col span={8}>
        <Form.Item label="注册时间" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`dateTime`, {
            defaultValue: [moment(), moment()]
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  return (<PageHeaderWrapper>
    <Card>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    </Card>
    <Card style={{marginTop: '10px'}}>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={agenterList}/>
    </Card>
  </PageHeaderWrapper>)
}

export default Form.create()(MemberData)





